<template>
  <div>
    <navbar></navbar>
    <van-nav-bar>
      <div class="search-box" slot="title" @click="$router.push('/search')">
        <div class="search-text">
          <i class="iconfont iconsousuo"></i>
          <span>搜索</span>
        </div>
      </div>
    </van-nav-bar>
  </div>
</template>

<script>
import navbar from "@/components/navbar.vue";
export default {
  components: {
    navbar
  }
};
</script>
<style scoped lang="less">
#home {
  width: 100vw;
  height: 100vh;

  /deep/.van-nav-bar {
    background-color: #3296fa;
  }

  .search-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 70%;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;

    .search-text {
      color: #fff;
      font-size: 30px;
      i {
        margin-right: 15px;
      }
    }
  }
}
</style>
